<style lang="less">
@import "../../styles/common.less";
@import "./arrangement.less";
</style>

<template>
    <div>
        <Row :gutter="10">
            <Col span="24">
                <Card>
                    <p slot="title">
                        <Icon type="social-yen"></Icon>
                        设备计费
                    </p>
                    <Row>
                        <Select v-model="model1" style="width:200px" placeholder="科室" filterable>
                            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                        <Select v-model="model2" style="width:200px" placeholder="设备类型" filterable>
                            <Option v-for="item in deviceTypes" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                        <DatePicker type="datetimerange" placeholder="查询时间范围" style="width: 300px" :options="futureDays"></DatePicker>
                        <span @click="handleSearch2" style="margin: 0 10px;"><Button type="primary" icon="search">筛选</Button></span>
                        <Button type="ghost" >取消</Button>
                    </Row>
                    <Row class="margin-top-10">
                        <Table :columns="columns2" :data="data2"></Table>
                    </Row>
                </Card>
            </Col>
        </Row>
    </div>
</template>

<script>
import * as table from "./data/search";
export default {
  name: "searchable-table",
  data() {
    return {
      model1: '',
      futureDays: {
        disabledDate(date) {
          return date.valueOf() > Date.now();
        }
      },
      deviceTypes:[
        {
          value: "New York",
          label: "显微镜"
        },
        {
          value: "London",
          label: "核磁共振仪"
        },
        {
          value: "Sydney",
          label: "质谱仪"
        },
        {
          value: "Ottawa",
          label: "手术台"
        },
        {
          value: "Paris",
          label: "人工肺"
        },
        {
          value: "Canberra",
          label: "血压计"
        }
      ],
      cityList: [
        {
          value: "New York",
          label: "皮肤科"
        },
        {
          value: "London",
          label: "消化内科"
        },
        {
          value: "Sydney",
          label: "眼科"
        },
        {
          value: "Ottawa",
          label: "儿科"
        },
        {
          value: "Paris",
          label: "耳鼻喉科"
        },
        {
          value: "Canberra",
          label: "呼吸内科"
        }
      ],
      searchConName1: "",
      searchConName2: "",
      searchConTel2: "",
      searchConName3: "",
      columns2: table.columns2,
      data1: [],
      initTable1: [],
      data2: [],
      initTable2: [],
      data3: [],
      initTable3: []
    };
  },
  methods: {
    init() {
      this.data1 = this.initTable1 = table.searchTable1;
      this.data2 = this.initTable2 = table.searchTable2;
      this.data3 = this.initTable3 = table.searchTable3;
    },
    search(data, argumentObj) {
      let res = data;
      let dataClone = data;
      for (let argu in argumentObj) {
        if (argumentObj[argu].length > 0) {
          res = dataClone.filter(d => {
            return d[argu].indexOf(argumentObj[argu]) > -1;
          });
          dataClone = res;
        }
      }
      return res;
    },
    handleSearch1() {
      this.data1 = this.initTable1;
      this.data1 = this.search(this.data1, { name: this.searchConName1 });
    },
    handleSearch2() {
      this.data2 = this.initTable2;
      this.data2 = this.search(this.data2, {
        name: this.searchConName2,
        tel: this.searchConTel2
      });
    },
    handleSearch3() {
      this.data3 = this.initTable3;
      this.data3 = this.search(this.data3, { name: this.searchConName3 });
    },
    handleCancel3() {
      this.data3 = this.initTable3;
    }
  },
  mounted() {
    this.init();
  }
};
</script>
